<template>
  <el-container>
    <el-main>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>会议的补签审核</el-breadcrumb-item>
      </el-breadcrumb>
      <!--          搜索框-->
      <div style="padding: 10px 0">
        <el-input
                suffix-icon="el-icon-user"
                class="ml-5"
                style="width: 200px"
                placeholder="请输入补签人姓名"
                v-model="userName"
        ></el-input>
        <el-button class="ml-5" type="primary" @click="load"> 搜索</el-button>
        <el-button class="ml-5" type="warning" @click="clear"> 重置</el-button>
      </div>

      <!--   表单-->
      <div style="margin: 10px 0">

      </div>
      <el-table :data="tableData">
        <el-table-column prop="userId" v-model="userId" label="用户Id" width="70">
        </el-table-column>
        <el-table-column prop="meetingId" v-model="meetingId" label="会议Id" width="70">
        </el-table-column>
        <el-table-column prop="punchId" v-model="punchId" label="签到卡Id" width="80">
        </el-table-column>
        <el-table-column prop="userName" label="补签者名字" width="110">
        </el-table-column>
        <el-table-column prop="conferenceTheme" label="补签的会议" width="150">
        </el-table-column>
        <el-table-column prop="state" v-model="state" label="状态" width="70">
        </el-table-column>
        <el-table-column prop="time" label="补签时间" width="160">
        </el-table-column>
        <el-table-column prop="method" label="签到方法" width="100">
        </el-table-column>
        <el-table-column prop="remark" v-model="remark" label="签到描述" width="180">
        </el-table-column>
        <!--      操作-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="success" @click="tongguo(scope.row)"
            >通过补签<i class="el-icon-edit"></i
            ></el-button>

            <el-button type="info" @click="handleEdit(scope.row)"
            >拒绝补签<i class="el-icon-remove-outline" ></i
            ></el-button>

          </template>
        </el-table-column>
      </el-table>

      <div style="padding: 10px 0">
        <!--            分页插件的基本参数-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
        >
        </el-pagination>
      </div>
<!--      弹框-->
      <el-dialog title="请在输入框内填写拒绝补签的理由" :visible.sync="outerVisible" width="980px">
        <el-form size="mini" :inline="true" :model="form" ref="form">
          <el-form-item label="用户Id">
            <el-input
                    style="width: 220px"
                    v-model="form.userId"
                    autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="会议Id">
            <el-input
                    style="width: 220px"
                    v-model="form.meetingId"
                    autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="签到卡Id">
            <el-input
                    style="width: 220px"
                    v-model="form.punchId"
                    autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="理由">
            <el-input
                    style="width: 220px"
                    v-model="form.remark"
                    autocomplete="off"
                    placeholder="必填"
            ></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="outerVisible = false">取 消</el-button>
          <el-button type="primary" @click="quxiao"> 确定</el-button>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>

  import request from "../../utils/request";
  export default {
    name: "Register",
    data() {
      return {
        //表格数据
        tableData: [],
        //分页数据
        total:0,
        pageNum:1,
        pageSize:5,
        //对搜索框参数的数据绑定
        userName:"",
        state:"",
        userId:'',
        meetingId:'',
        punchId:'',
        remark:'',
        outerVisible: false,
        form:{},
        meta: {
          requireAuth: true
        }
      }
    },
    created() {
      //调用请求的方法
      this.load();
    },
    methods:{
      //取消的方法
      quxiao(){
        request.post("punchCad/UpdateCardState2", this.form).then(res =>{
          this.outerVisible = false
          //如果取消成功
          if (res){
            //成功
            this.$message.success("拒绝补签成功");
            //刷新
            this.load();
          }else {
            this.$message.error("失败!");
          }
        })
      },
      handleEdit(row){
        this.form = row;
        //打开弹框
        this.outerVisible = true;
      },
      //通过的方法
      tongguo(row){
        this.form = row;
        request.post("punchCad/UpdateCardState",this.form).then(res =>{
          //如果审核通过
          if (res){
            //成功
            this.$message.success("补签成功");
            //刷新
            this.load();
          }else {
            this.$message.error("失败!");
          }
        })
      },
      //封装请求的方法
      load(){
        request.get("punchCad/findPage",{
          params: {
            pageNum : this.pageNum,
            pageSize : this.pageSize,
            user_name : this.userName,
            state : '补签'
          }
        }).then(res=>{
          //把传回来的值给tableData
          this.tableData = res.data;
          //total
          this.total = res.total;
        })
      },
      //当改变分页参数
      handleSizeChange(pageSize){
        this.pageSize = pageSize;
        //参数改变以后重新调用请求的方法
        this.load();
      },
      handleCurrentChange(pageNum){
        this.pageNum = pageNum;
        //参数发生改变以后重新请求方法
        this.load();
      },
      //清空表单数据
      clear(){
        this.userName="";
        //刷新
        this.load()
      }
    }
  };
</script>
<style scoped lang="less">
</style>
